<template>
	<div class="warp">
		<div class="search">
			<div class="warp-left">
				<slot></slot>
				<el-button @click="search" icon="el-icon-search" type="primary">查询</el-button>
				<!-- <el-tooltip content="高级搜索" effect="dark" placement="top"> -->
				<el-button @click="show = !show" class="advanced-search" icon="el-icon-s-tools" v-if="$slots.form">
					高级搜索
					<!-- <i :class="show ? 'down' : 'up'" class="el-icon-d-arrow-left"></i> -->
				</el-button>
				<!-- </el-tooltip> -->
				<el-button @click="reset" icon="el-icon-refresh-left">重置</el-button>
			</div>
			<div class="warp-right">
				<slot name="btn"></slot>
			</div>
		</div>
		<el-collapse-transition v-if="$slots.form">
			<div class="form" v-show="show">
				<slot name="form"></slot>
			</div>
		</el-collapse-transition>
	</div>
</template>
<script>
export default {
	props: {
		/**
		 * labelFrom组件的label宽度，可以在这统一设置
		 */
		labelWidth: Number,
		/**
		 * 搜索方法
		 */
		search: {
			type: Function,
			default: function () {
				throw new Error('请设置搜索方法')
			}
		},
		reset: {
			type: Function,
			default: function () {
				throw new Error('请设置重置方法')
			}
		}
	},
	name: 'searchForm',
	data() {
		return {
			show: false
		}
	}
}
</script>
<style lang="scss" scoped>
.warp {
	.search {
		display: flex;
		.warp-left {
			flex: 1;
			.down {
				transform: rotate(90deg);
			}
			.up {
				transform: rotate(-90deg);
			}
			.advanced-search {
				margin-left: $margin;
			}

			:v-deep .label-warp {
				margin-right: $margin;
				display: inline-block;
				min-width: 0;
				label {
					width: auto !important;
				}
			}
		}
		.warp-right {
			margin-left: $margin;
			a {
				color: $color-text-regular;
				padding: 0 15px;
				text-decoration: none;
				font-size: 12px;
				position: relative;
				line-height: 1;
				display: inline-block;
				&::before {
					content: '';
					display: block;
					width: 1px;
					height: 14px;
					position: absolute;
					right: 0;
					top: 0px;
					background-color: $color-text-regular;
				}
			}
			:v-deep .el-button--text + .el-button {
				margin-left: 20px;
			}
			:v-deep .el-button--text + .el-button--text {
				margin-left: 0px;
			}
			:v-deep .el-button--text {
				color: $color-text-regular;
				padding: 0 15px;
				position: relative;
				&::before {
					content: '';
					display: block;
					width: 1px;
					height: 14px;
					position: absolute;
					right: 0;
					top: 0px;
					background-color: $color-text-regular;
				}
			}
		}
	}
	.form {
		margin-top: 10px;
		padding: 0 10px 10px;
		background-color: #f8f8f8;
		&::after {
			content: '';
			display: block;
			clear: both;
		}
		:v-deep .label-warp {
			margin-top: 15px;
			width: 20%;
			display: inline-block;
		}
	}

	:v-deep .el-input,
	:v-deep .el-select {
		width: 200px;
		@media screen and (max-width: 1600px) {
			width: 180px;
		}
		@media screen and (max-width: 1260px) {
			width: 160px;
		}
	}
}
</style>
